<template>
	<view class="content">
		<view class="statusBox"></view>
		<view class="searchBox width90 padding5">
			<view class="search">
				<uni-icons class="icons" type="search" color="#999999" size="16"/>
				<input class="searchInput" :value="inputValue" type="text" placeholder="请输入关键词" @input="getValue" @confirm="searBtn">
			</view>
			<view class="clearBoth"></view>
		</view>

		<view class="leftRows">
			<view class="leftRowsBox" v-for="(item,index) in typeBox" :key="index" @tap="thisType(item.id,index,item)">
				<view class="leftSplit" v-if="item.beThis?'thisName':''"></view>
				<view class="leftName" :class="item.beThis?'thisName':''">{{item.name}}</view>
			</view>
		</view>
		<view class="contentBox">
			
			<uni-swiper-dot class="swiper" :info="bannerLists" :current="current" mode="round" :dotsStyles="dotsStyles" v-show="showBanner" style="margin-bottom: 40upx;">
				<swiper class="swiper-box swiper" @change="change" autoplay="autoplay" circular="true">  
					<swiper-item v-for="(item, indexc) in bannerLists" :key="indexc"  @tap="tapBanner(item)" v-show="item.show">
						<image class="swiperitem banner"  :src="item.src"/>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			
			<view class="thingsBox"  v-show="cate_id==0">
				<view class="thingsBoxesFather">
					<view class="thingsBoxes" v-for="(item,index) in contentBox" :key="index" @tap="inList(item)">
						<view class="imageCenterBox">
							<image class="cover" :src="item.cate_pic" mode=""></image>
						</view>
						<view class="name overflow_one">{{item.cate_name}}</view>
					</view>
				</view>
				<view class="clearBoth"></view>
			</view>
			   
			
			<view class="thingsBox" v-for="(item,index) in contentBox" :key="index"  v-show="cate_id!==0">
				<view class="thingsTitle">{{item.title}}</view>
				<view class="thingsBoxesFather">
					<view class="thingsBoxes" v-for="(items,indexs) in item.type" :key="indexs" @tap="inList(items)">
						<view class="imageCenterBox">
							<image class="cover" :src="items.cate_pic" mode=""></image>
						</view>
						<view class="name overflow_one">{{items.cate_name}}</view>
					</view>
				</view>
				<view class="clearBoth"></view>
			</view>
			
		</view>
		
		
		
		
	</view>
</template>
<style>
	.content{width: 100%;height: 90vh;overflow: hidden;}
	.searchBox{background: white;margin-top: 52upx;margin-bottom: 40upx;margin-left: 5%;}
	.searchBox .search{width:70%;padding:0 2.5%;height:56upx;line-height: 56upx;float:left;background:rgb(245,245,249);border-radius: 100upx;position: relative;}
	.searchBox .search .icons{margin-left:10upx;float: left;}
	.searchBox .search .btnSearch{float: right;width:20%;text-align: center;position: absolute;top:0;right:-20%;font-size: 14px;}
	.searchBox .search .searchInput{width:70%;color:#999999;font-size: 14px;height:56upx;line-height: 56upx;margin-left:20upx;float: left;}
	.searchBox .search .uni-input-placeholder{font-size: 14px;}
	.content .leftRows{width: 25%;height:90%;overflow-y:scroll;background: rgb(245,245,249);padding-bottom: 100upx;float: left;}
	.content .leftRows .leftRowsBox{width: 100%;height:90upx;line-height: 90upx;position: relative;}
	.content .leftRows .leftRowsBox .leftSplit{width: 10upx;height:60upx;background: rgb(207,83,40);border-radius: 100upx;position: absolute;top:15upx;left: 0;z-index: 2;}
	.content .leftRows .leftRowsBox .leftName{color:#444444;font-size: 26upx;text-align: center;background: rgb(245,245,249);border-radius: 10upx;overflow: hidden;}
	.content .leftRows .leftRowsBox .thisName{color:#262626;font-size: 30upx;text-align: center;background: white;font-weight: bold;}
	.content .contentBox{width:70%;margin-left:2.5%;float: left;height:90%;overflow-y:scroll;padding-bottom: 100upx;}
	.content .contentBox .swiper{width:100%;height:190upx;overflow: hidden;}
	.content .contentBox .banner{width:100%;height:180upx;border-radius:10upx;}
	.content .contentBox .thingsBox{width: 100%;margin:40upx 0;margin-top: 0;}
	.content .contentBox .thingsBox .thingsTitle{width: 100%;font-size: 28upx;color:#262626;font-weight: bold;margin-bottom: 20upx;}
	.content .contentBox .thingsBox .thingsBoxesFather{width: 100%;display: flex;justify-content:space-between;flex-wrap: wrap;}
	.content .contentBox .thingsBox .thingsBoxes{width: 26%;margin-bottom: 20upx;}
	.content .contentBox .thingsBox .thingsBoxes .imageCenterBox{display: flex;justify-content: center;}
	.content .contentBox .thingsBox .thingsBoxes .cover{width:110upx;height:110upx;border-radius: 5upx;}
	.content .contentBox .thingsBox .thingsBoxes .name{width:100%;text-align: center;color:#262626;font-size: 24upx;margin-top: 20upx;}
</style>
<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import Share from '@/common/wx_share.js'
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	export default {
		components:{
			uniIcons,
			uniSwiperDot
		},
		data() {
			return {
				share:{
					title:"",
					path:'/pages/tabbar/item',
					imageUrl:'',
					desc:'',
					content:''
				},
				inputValue:"",
				typeBox:[
					{id:0,beThis:true,name:"热门推荐"},
				],
				bannerList:[],
				bannerLists:[
					// {src:"/static/index/banner.png"},
					// {src:"/static/index/banner.png"},
					// {src:"/static/index/banner.png"}
				],
				showBanner:false,
				current:0,
				dotsStyles:{
					bottom:15,
					backgroundColor: 'rgba(255,255,255,0.5)',
					border: '1px solid none',
					color: 'none',
					selectedBackgroundColor: 'white',
					selectedBorder: '1px none solid'
				},
				contentBox:[
					// {title:"标题1",type:[{name:"类别1",cover:"/static/del/del_1.png"},{name:"类别2",cover:"/static/del/del_1.png"},{name:"类别3",cover:"/static/del/del_1.png"},{name:"类别4",cover:"/static/del/del_1.png"}]},
					// {title:"标题2",type:[{name:"类别1",cover:"/static/del/del_1.png"},{name:"类别2",cover:"/static/del/del_1.png"},{name:"类别3",cover:"/static/del/del_1.png"},{name:"类别4",cover:"/static/del/del_1.png"}]},
					// {title:"标题3",type:[{name:"类别1",cover:"/static/del/del_1.png"},{name:"类别2",cover:"/static/del/del_1.png"},{name:"类别3",cover:"/static/del/del_1.png"},{name:"类别4",cover:"/static/del/del_1.png"}]},
					// {title:"标题4",type:[{name:"类别1",cover:"/static/del/del_1.png"},{name:"类别2",cover:"/static/del/del_1.png"},{name:"类别3",cover:"/static/del/del_1.png"},{name:"类别4",cover:"/static/del/del_1.png"}]},
					// {title:"标题5",type:[{name:"类别1",cover:"/static/del/del_1.png"},{name:"类别2",cover:"/static/del/del_1.png"},{name:"类别3",cover:"/static/del/del_1.png"},{name:"类别4",cover:"/static/del/del_1.png"}]},
				],
				cate_id:0,
				


				
				
				
				
			}
		},
		onLoad(){
			this.AjaxLoad();
			this.AjaxThisRows();
		},
		methods: {
			AjaxLoad(){
				var that = this,typeBox=[],bannerList=[];
				let params={};
				this._$InitRequest.request('Category/index', params).then(res => {
					
					res.data.cateres.forEach( (item) =>{
						typeBox.push({
							id:item.id,
							name:item.cate_name,
							beThis:false
						})
					})
					for (var i = 0; i < typeBox.length; i++){this.typeBox.push( typeBox[i] )}
					
					res.data.cateres.forEach( (item) =>{
						bannerList.push({
							src:item.cate_pic,
							show:false
						})
					})
					for (var i = 0; i < bannerList.length; i++){this.bannerList.push( bannerList[i] )}
					
				},error=>{})
			},
			AjaxThisRows(){
				var contentBox = []
				let params={
					cate_id:this.cate_id
				};
				this._$InitRequest.request('category/getchild', params).then(res => {
					if( this.cate_id == 0 ){
						res.data.forEach( (item) =>{
							contentBox.push({
								id:item.id,
								cate_name:item.cate_name,
								cate_pic:item.cate_pic
							})
						})
						for (var i = 0; i < contentBox.length; i++){this.contentBox.push( contentBox[i] )}
					}else{
						res.data.forEach( (item) =>{
							contentBox.push({
								id:item.id,
								title:item.cate_name,
								type:item.three
							})
						})
						for (var i = 0; i < contentBox.length; i++){this.contentBox.push( contentBox[i] )}
					}
				},error=>{})
			},
			getValue(e){this.inputValue = e.target.value},
			searBtn(){
				if( this.inputValue == "" ){
					uni.showToast({icon:"none",title:"请输入搜索内容"})
					return;
				}else{
					uni.navigateTo({
						url:"/pages_type/pages/typeList/typeList?searchValue=" + this.inputValue
					})
				}
			},
			thisType(id,index,item){
				uni.showLoading({
					title:"加载中..."
				})
				this.bannerLists = []
				for (var i = 0; i < this.typeBox.length; i++) {
					this.typeBox[i].beThis = false
				}
				this.typeBox[index].beThis = true
				
				index = index - 1
				if( item.name !== '热门推荐' ){
					this.showBanner = true
					for (var i = 0; i < this.bannerList.length; i++) {
						this.bannerList[i].show = false
					}
					this.bannerList[index].show = true
					
					this.bannerLists.push( this.bannerList[index] )
				}else{
					this.showBanner = false
				}
				
				
				this.contentBox = []
				this.cate_id = id
				this.AjaxThisRows()
				setTimeout(()=>{
					uni.hideLoading()
				},500)
			},
			tapBanner(item){},
			change(e){this.current = e.detail.current},
			inList(item){
				uni.navigateTo({
					url:"/pages_type/pages/typeList/typeList?searchValue=" + item.cate_name + "&id=" + item.id
				})
			},
			
			
			
			
			
			
			
		}
	}
</script>